<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev disabled" @click="toggPage(pageNo - 1)">
          <a>«上一页</a>
        </li>
        <li @click="toggPage(1)" v-if="startNum_And_EndNum.start ? startNum_And_EndNum.start >= 2 : false" :class="{ active: pageNo === 1 }">
          <a>1</a>
        </li>
        <li class="dotted" v-if="startNum_And_EndNum.start ? startNum_And_EndNum.start >= 3 : false"><span>...</span></li>
        <!-- ----------------- -->

        <li
          @click="toggPage(startNum_And_EndNum.start + item - 1)"
          v-for="item in num_lis"
          :key="item"
          :class="{ active: pageNo === startNum_And_EndNum.start + item - 1 }"
        >
          <a>{{ startNum_And_EndNum.start + item - 1 }}</a>
        </li>

        <!-- ----------------- -->
        <li class="dotted" v-if="startNum_And_EndNum.start ? startNum_And_EndNum.end <= totlePage - 2 : false"><span>...</span></li>
        <li
          @click="toggPage(totlePage)"
          v-if="startNum_And_EndNum.start ? startNum_And_EndNum.end <= totlePage - 1 : false"
          :class="{ active: pageNo === totlePage }"
        >
          <a>{{ totlePage }}</a>
        </li>
        <li class="next" @click="toggPage(pageNo + 1)">
          <a>下一页»</a>
        </li>
      </ul>
      <div>
        <span>共{{ total }}个结果&nbsp;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['pageNo', 'pageSize', 'total', 'MainLi_length'],
  data() {
    return {}
  },
  computed: {
    totlePage() {
      const { total, pageSize } = this
      return Math.ceil(total / pageSize)
    },
    startNum_And_EndNum() {
      const { pageNo, totlePage, MainLi_length } = this
      // console.log(pageNo, totlePage, MainLi_length)
      let start = pageNo - Math.floor(MainLi_length / 2)
      let end = pageNo + Math.floor(MainLi_length / 2)

      // 判断是否越界
      if (MainLi_length > totlePage) {
        start = 1
        end = totlePage
      } else if (start <= 0) {
        start = 1
        end = start + MainLi_length - 1
      } else if (end > totlePage) {
        start = totlePage - MainLi_length
        end = totlePage
      }
      return { start, end }
    },
    num_lis() {
      return this.startNum_And_EndNum.end - this.startNum_And_EndNum.start + 1
    },
  },
  methods: {
    toggPage(pageOn) {
      if (pageOn <= 0 || pageOn > this.totlePage) return null
      if (pageOn === this.pageNo) return null
      this.$emit('toggPage', pageOn)
    },
  },
  watch: {
    startNum_And_EndNum: {
      handler(val) {
        console.log('watch', val)
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 66px;
  overflow: hidden;
  float: right;
  .sui-pagination {
    width: 100%;
    margin: 18px 0;
    display: flex;
    justify-content: center;
    ul {
      vertical-align: middle;
      li {
        line-height: 18px;
        display: inline-block;
        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }
        &.active {
          a {
            background-color: #ccc;
            color: green;
            border-color: #fff;
            cursor: default;
            font-size: 20px;
          }
        }
        &.prev {
          margin-right: 20px;
          a {
            background-color: #fafafa;
          }
        }
        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }
        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }
        &.next {
          margin-left: 20px;
          margin-right: 20px;
          a {
            background-color: #fafafa;
          }
        }
      }
    }
    div {
      color: #333;
      font-size: 14px;
      padding-top: 10px;
    }
  }
}
</style>